<template>
  <div class="full-box shadow-box padding-box">
    <div class="operate-bar">
      <div class="btn-group">
        <template v-if="type == 0">
          <el-button type="warning" @click="dialog.questionSort = true"
            >问题梳理</el-button
          >
        </template>
        <template v-if="type == 1">
          <el-button type="primary" @click="questionAdd">添加问题</el-button>
        </template>
        <el-button type="info" @click="linkBack">返回</el-button>
      </div>
    </div>
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="180px"
      :inline="false"
    >
      <el-form-item label="问题项目" prop="project_id">
        <ProjectList
          style="width: 500px"
          :defaultProject.sync="form.project_id"
          :projects="projects"
        ></ProjectList>
      </el-form-item>
      <!-- <el-form-item label="问题分类" prop="">

      </el-form-item> -->
      <el-form-item label="存在问题" prop="problem_desc">
        <el-input
          type="textarea"
          v-model="form.problem_desc"
          placeholder=""
          :autosize="{
            minRows: 3,
            maxRow: 6,
          }"
        ></el-input>
      </el-form-item>
      <el-form-item label="工作建议" prop="proposal">
        <el-input
          type="textarea"
          v-model="form.proposal"
          placeholder=""
          :autosize="{
            minRows: 3,
            maxRow: 6,
          }"
        ></el-input>
      </el-form-item>
      <el-form-item label="协调情况" prop="concert_content">
        <el-input
          type="textarea"
          v-model="form.concert_content"
          placeholder=""
          :autosize="{
            minRows: 3,
            maxRow: 6,
          }"
        ></el-input>
      </el-form-item>
      <el-form-item label="建议承办单位" prop="proposeDept">
        <!-- <DeptCascader
          :defaultChecked.sync="form.undertake_dept_name"
          :options="depts"
          @change="changeDept"
        ></DeptCascader> -->
        <el-input v-model="form.proposeDept" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="期望问题解决期限" prop="finish_limit_date">
        <el-date-picker
          v-model="form.finish_limit_date"
          type="date"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="是否已与承办单位协调" prop="concert_fag">
        <el-select
          v-model="form.concert_fag"
          value-key=""
          placeholder=""
          clearable
          filterable
        >
          <el-option :key="0" label="是" :value="0"></el-option>
          <el-option :key="1" label="否" :value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-dialog
      title="问题梳理"
      width="700px"
      :visible.sync="dialog.questionSort"
      :close-on-click-modal="false"
      @close="dialog.questionSort = false"
    >
      <el-form ref="questionForm" :rules="rules" label-width="100px">
        <el-form-item label="问题梳理">
          <el-select v-model="problem_level" value-key="" placeholder="">
            <el-option :key="0" label="非问题" :value="0"></el-option>
            <el-option :key="1" label="一般问题" :value="1"></el-option>
            <el-option :key="2" label="交办问题" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="handleQuestionSort">
            提交
          </el-button>
          <el-button @click="dialog.questionSort = false">返回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import ProjectList from "@/components/Common/ProjectList.vue";
import { getProjectList } from "@/api/Project/Index";
import DeptCascader from "@/components/Common/DeptCascader.vue";
import { getDeptTree } from "@/api/System/Department";
import {
  getQuestionDetails,
  postQuestionAdd,
} from "@/api/MajorProjectPromotion/Index";
import { required } from "@/utils/eValidate";
import LinkTo from "@/mixins/LinkTo";
import QuestionSort from "./mixins/questionSort";
export default {
  name: "ProjectQuestionForm",
  mixins: [LinkTo, QuestionSort],
  components: { ProjectList, DeptCascader },
  data() {
    return {
      id: 0,
      type: 0,
      form: {
        project_id: "",
        problem_desc: "",
        proposal: "",
        concert_content: "",
        proposeDept: "",
        finish_limit_date: "",
        concert_fag: "",
      },
      rules: {
        project_id: [required],
        problem_desc: [required],
        proposeDept: [required],
        finish_limit_date: [required],
        concert_fag: [required],
      },
      projects: [],
      depts: [],
      dialog: {
        questionSort: false,
      },
    };
  },
  methods: {
    linkBack() {
      switch (parseInt(this.type)) {
        case 0:
          this.linkTo(`/majorProjectPromotionQuestionReview`);
          break;
        case 1:
          this.linkTo(`/majorProjectPromotionProjectQuestion`);
          break;
        default:
          break;
      }
    },
    initData() {
      getQuestionDetails({ id: this.id }).then((res) => {
        if (res.code == 0) {
          this.form = res.data;
        }
      });
    },
    initProject() {
      getProjectList({ pageNum: 1, pageSize: 1000 }).then((res) => {
        if (res.code == 0) {
          this.projects = res.data;
        }
      });
    },
    initDept() {
      getDeptTree().then((res) => {
        if (res.code == 0) {
          this.depts = res.data;
        }
      });
    },
    questionAdd() {
      this.$refs.form.validate().then((valid) => {
        postQuestionAdd(this.form).then((res) => {
          if (res.code == 0) {
            this.$message.success("项目问题提交成功");
            this.linkBack();
          }
        });
      });
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.type = this.$route.params.type;
    this.initProject();
    // this.initDept();
    if (this.id > 0) {
      this.initData();
    }
  },
};
</script>

<style lang="scss" scoped>
</style>